<template>
  <el-dialog
    title="修改密码"
    :visible.sync="passwordOn"
    center
    width="600px"
  >
    <el-form
      ref="setRef"
      :model="setForm"
      :rules="setRules"
    >
      <el-row>
        <el-col :span="4">
          <div class="user_te">
            用户名：
          </div>
        </el-col>
        <el-col :span="20">
          <el-form-item prop="username">
            <el-input
              v-model="setForm.username"
              prefix-icon="el-icon-user"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="user_te">
            原密码：
          </div>
        </el-col>
        <el-col :span="20">
          <el-form-item prop="password">
            <el-input
              v-model="setForm.password"
              type="password"
              prefix-icon="el-icon-lock"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="user_te">
            新密码：
          </div>
        </el-col>
        <el-col :span="20">
          <el-form-item prop="setPassword">
            <el-input
              v-model="setForm.setPassword"
              prefix-icon="el-icon-lock"
              @keyup.enter.native="resPass()"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="passwordOn = false">取 消</el-button>
      <el-button
        type="primary"
        @click="resPass()"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name:'ResetPassword', 
  data(){    
    return {
      passwordOn:false, //重置密码块显示开关
      setForm: { //提交表单数据
        username: sessionStorage.getItem('username'),
        password: '',
        setPassword: ''
      },
      //表单预验证
      setRules: {
        username: [ // 预验证用户名
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 15,
            message: '长度在 3 到 15 个字符',
            trigger: 'blur'
          }
        ],
        password: [ // 预验证密码
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ],
        setPassword: [ // 预验证新密码
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
    //调用显示重置密码块的函数
    this.showResetPassWord()
  },
  beforeDestroy () {
    //销毁显示重置密码块的全局事件
    this.$bus.$off("showPasswordBlock") 
  },
  methods:{  
    //定义显示重置密码块的全局事件
    showResetPassWord(){
      this.$bus.$on("showPasswordBlock",()=>{ 
        return this.passwordOn = true
      })
    },
    //重置密码
    resPass() {
      this.$refs.setRef.validate(async value => { // 表单预验证
        if (!value) {
          return
        }
        // 登陆验证
        const {data: res} = await this.$http.put('login', this.setForm)
        if (res.meta.status !== 200) { // 登陆失败，提示失败信息并return
          return this.$message.error(res.meta.message)
        } 
        this.$message.success(res.meta.message) //成功提示
        sessionStorage.removeItem('token') //删除token值存储
        this.passwordOn = false //关闭重置密码
        this.$refs.setRef.resetFields() //重置表单
        this.$router.push('/login') //跳转登陆页       
      })
    }
  }
}
</script>

<style>

</style>